<template>
    <!--公司注册-->
  <div class="company">
   <div class="c-container">
     <!--注册地址-->
     <Card>
       <div class="c-card">
         <div class="c-x">
           <div class="c-c-x"></div>
           <div class="font">注册地址</div>
         </div>
         <div>
           <div class="c-x-2" @click="tag">
             <div>
               <span class="font2">{{$store.state.app.c.province}}</span>
               <span class="font2">{{$store.state.app.c.city}}</span>
               <span class="font2">{{$store.state.app.c.town}}</span>
             </div>
             <div>
               <img src="@/assets/jt.png"/>
             </div>
           </div>
           <MyCascader></MyCascader>
         </div>
       </div>
     </Card>
     <!--公司名称-->
     <Card class="card-2">
       <div class="c-c-2">
         <div class="c-c-2-1">
           <div class="c-x">
             <div class="c-c-x"></div>
             <div class="font">公司名称</div>
           </div>
         </div>
         <div class="c-c-2-2">
           <div>
             <Input clearable v-model="$store.state.app.cp.fn" placeholder="请输入公司名" :autofocus=true></Input>
           </div>
           <div>
             <Button class="c-name-s" @click="csn = true">添加备用名</Button>
           </div>
         </div>
       </div>
     </Card>
     <!--备用名-->
     <Card class="card-3">
       <div class="c-x">
         <div class="c-c-x"></div>
         <div class="font">备用名称</div>
       </div>
       <div class="c-3-1" v-for="(item,index) in $store.state.app.cp.sn">
             <span class="c-3-2">
                  {{item}}
               </span>
         <span class="c-3-3" @click="redSn(index)">
                 <img src="@/assets/delete.png"/>
               </span>
       </div>
     </Card>
     <!--注册资金-->
     <Card class="card-4">
       <div class="c-4-1">
         <div class="c-x">
           <div class="c-c-x"></div>
           <div class="font">注册资金</div>
         </div>
         <div class="c-4-2">
           <div class="c-4-4">
             <InputNumber :max="1000" :min="1" v-model="$store.state.app.cp.money"></InputNumber>
           </div>
           <div class="c-4-3">
             <span>万</span>
           </div>
         </div>
       </div>
     </Card>
     <!--法人-->
     <Card class="card-5">
       <router-link to="legal">
         <div class="c-5-1">
           <div class="c-x">
             <div class="c-c-x"></div>
             <div class="font">法人</div>
           </div>
           <div>
             <div class="c-x-2" v-if="$store.state.app.cp.legals.length>0">
               <div>
                 <span class="font2">{{$store.state.app.cp.legals[$store.state.app.cp.legals.length-1].name}}</span>
                 <span class="font2">{{$store.state.app.cp.legals[$store.state.app.cp.legals.length-1].phone}}</span>
                 <span class="font2">{{$store.state.app.cp.legals[$store.state.app.cp.legals.length-1].stock}}%</span>
               </div>
               <div>
                 <img src="@/assets/jt.png"/>
               </div>
             </div>
           </div>
         </div>
       </router-link>
     </Card>
     <!--股东-->
     <Card class="card-6">
       <div class="c-x">
         <div class="c-c-x"></div>
         <div class="font">股东</div>
       </div>
       <div class="c-3-1" v-for="(item,index) in $store.state.app.cp.legals">
             <span class="c-3-2 font2 ">
                {{item.name}} {{item.phone}} {{item.stock}}%
               </span>
         <span class="c-3-3" @click="reLegals(index)">
                 <img src="@/assets/delete.png"/>
               </span>
       </div>
     </Card>
     <!--监事-->
     <Card class="card-7">
       <div class="c-5-1" @click="tag2">
         <div class="c-x">
           <div class="c-c-x"></div>
           <div class="font">监事</div>
         </div>
         <div>
           <div v-for="(item,index) in $store.state.app.cp.legals">
             <div class="c-x-2" v-if="item.type==1">
               <div>
                 <span class="font2">{{item.name}}</span>
                 <span class="font2">{{item.phone}}</span>
                 <span class="font2">{{item.stock}}%</span>
               </div>
               <div>
                 <img src="@/assets/jt.png"/>
               </div>
             </div>
           </div>
         </div>
       </div>
       <Supervisor></Supervisor>
     </Card>
     <!--财务-->
     <Card class="card-8">
       <div class="c-5-1" @click="tag3">
         <div class="c-x">
           <div class="c-c-x"></div>
           <div class="font">财务</div>
         </div>
         <div>
           <div v-for="(item,index) in $store.state.app.cp.legals">
             <div class="c-x-2" v-if="item.type==2">
               <div>
                 <span class="font2">{{item.name}}</span>
                 <span class="font2">{{item.phone}}</span>
                 <span class="font2">{{item.stock}}%</span>
               </div>
               <div>
                 <img src="@/assets/jt.png"/>
               </div>
             </div>
           </div>
         </div>
       </div>
       <Finance></Finance>
     </Card>
     <!--经营范围-->
     <Card class="card-9">
       <div class="c-9-card">
         <div class="c-x">
           <div class="c-c-x"></div>
           <div class="font">经营范围</div>
         </div>
        <div>
          <router-link to="manage">
            <Button class="card-9-b">一键生成</Button>
          </router-link>
        </div>
       </div>
       <div class="c-9-m" v-show="$store.state.app.cp.manage!=''">
         <Input :rows="3" v-model="$store.state.app.cp.manage" type="textarea" placeholder="Enter something..."></Input>
       </div>
     </Card>
   </div>
    <Modal
      title="添加备用名称"
      v-model="csn"
      @on-ok="addSN"
      class-name="vertical-center-modal">
      <Input  clearable v-model="sn"  placeholder="请输入公司名" :autofocus=true></Input>
    </Modal>
  </div>
</template>

<script>
    import MyCascader from "./MyCascader.vue";
    import Supervisor from "./Supervisor.vue";
    import Finance from "./Finance.vue";

    export default {
        name: "company",
        components:{
          MyCascader,
          Supervisor,
          Finance,
        },
        data() {
            return {

              csn: false,
              sn:"",
            };
        },
        mounted(){

       },
        methods: {
          reLegals(index){
            this.$store.commit("cpReLegals",index);
          },
          redSn(index){
            this.$store.commit("cpReSn",index);
          },
          addSN(){
            if (this.sn==""){
              return;
            }
            this.$store.commit("cpAddSn",this.sn);
            this.sn="";
          },
          tag(){
            this.$store.commit("cShow",true);
          },
          tag2(){
            this.$store.commit("cShow2",true);
          },
          tag3(){
            this.$store.commit("cShow3",true);
          },
        },

    }
</script>

<style lang="less" scoped>
@import "./less/company";
</style>

<style lang="less">
  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal{
      top: 0;
    }
  }
</style>
